<template>
    <div>
        <h1>服务管理</h1>

        <!-- 搜索条件 -->
        <div style="display: flex; align-items: center; gap: 10px; justify-content: space-between;">
            <div style="display: flex; align-items: center; gap: 10px;">
                <p>搜索条件</p>
                <el-input v-model="serviceDetailsSearchForm.serviceName" placeholder="服务名称" style="width: 150px;"
                    clearable />
                <el-input v-model="serviceDetailsSearchForm.servicePrice" placeholder="服务单价" style="width: 150px;"
                    clearable />
                <el-input v-model="serviceDetailsSearchForm.state" placeholder="服务状态" style="width: 150px;" clearable />
                <el-button type="primary" @click="findService">搜索</el-button>
            </div>

            <div>
                <el-button type="primary" @click="addServiceDetailFlag = true">新增服务</el-button>
                <el-button type="danger" @click="deleteDetails">删除服务</el-button>
            </div>
        </div>

        <!-- 服务列表 -->
        <div v-if="serviceDetails.list.length === 0" style="text-align: center; margin: 20px;">
            <p>服务为空，请添加</p>
        </div>
        <el-table v-else ref="multipleTableRef" :data="serviceDetails.list" style="width: 100%"
            @selection-change="handleSelectionChange">
            <el-table-column type="selection" :selectable="selectable" width="55" />
            <el-table-column prop="serviceId" label="服务编号" width="100" />
            <el-table-column prop="serviceName" label="服务名称" width="150" />
            <el-table-column prop="servicePrice" label="服务价格" width="100" />
            <el-table-column prop="details" label="服务描述" width="200" />
            <el-table-column prop="estimatedTime" label="预计耗费工时" width="150" />
            <el-table-column prop="terms" label="服务条款说明" width="200" />
            <el-table-column prop="createdAt" label="创建时间" width="150" />
            <el-table-column prop="updatedAt" label="更新时间" width="150" />
            <el-table-column prop="categoryId" label="服务类别编号" width="150" />
            <el-table-column prop="serviceImage" label="服务图片" width="100">
                <template #default="scope">
                    <el-image v-if="scope.row.serviceImage" :src="scope.row.serviceImage"
                        style="width: 50px; height: 50px;" />
                    <span v-else>无图片</span>
                </template>
            </el-table-column>
            <el-table-column prop="state" label="状态" width="100" />
            <el-table-column prop="shopId" label="商品编号" width="100" />

            <el-table-column prop="serviceItems" label="服务必需品" width="200">
                <template #default="scope">
                    <el-button @click="scope.row.showItems = !scope.row.showItems">
                        {{ scope.row.showItems ? '隐藏必需品' : '显示必需品' }}
                    </el-button>
                    <div v-if="scope.row.showItems">
                        <div v-if="scope.row.serviceItems && JSON.parse(scope.row.serviceItems).length">
                            <div v-for="(item, index) in JSON.parse(scope.row.serviceItems)" :key="index">
                                必需品编号：{{ item.itemsId }} <br />
                                必需品名称：{{ item.itemsName }}<br />
                                数量：{{ item.quantity }}小时 <br />
                                必需品单价：{{ item.unitPrice }}元<br />
                                总价：{{ item.price }}元
                            </div>
                        </div>
                        <span v-else>无必需品</span>
                    </div>
                </template>
            </el-table-column>

            <el-table-column prop="serviceProcesses" label="服务流程" width="200">
                <template #default="scope">
                    <el-button @click="scope.row.showProcesses = !scope.row.showProcesses">
                        {{ scope.row.showProcesses ? '隐藏服务流程' : '显示服务流程' }}
                    </el-button>
                    <div v-if="scope.row.showProcesses">
                        <div v-if="scope.row.serviceProcesses && JSON.parse(scope.row.serviceProcesses).length">
                            <div v-for="(process, index) in JSON.parse(scope.row.serviceProcesses)" :key="index">
                                流程编号：{{ process.processesId }} <br />
                                流程名称:{{ process.processesName }}<br />
                                工时: {{ process.workingHours }} 小时 <br />
                                单价:{{ process.unitPrice }}元<br />
                                总价：{{ process.processesPrice }}元
                            </div>
                        </div>
                        <span v-else>无服务流程</span>
                    </div>
                </template>
            </el-table-column>

            <el-table-column label="操作" width="100">
                <template #default="scope">
                    <el-button size="small" @click="changeService(scope.row)">维护</el-button><br />
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页 -->
        <div class="demo-pagination-block">
            <el-pagination v-model:current-page="serviceDetails.pageNum" v-model:page-size="serviceDetails.pageSize"
                :page-sizes="[1, 2, 3]" :size="size" :disabled="disabled" :background="background"
                layout="total, sizes, prev, pager, next, jumper" :total="serviceDetails.total"
                @size-change="handleSizeChange" @current-change="handleCurrentChange" />
        </div>

        <!-- 服务信息维护对话框 -->
        <el-dialog v-model="changeFlag" title="服务信息维护" width="500" :before-close="handleClose">
            <div style="padding: 20px;">
                <span style="display: block; margin-bottom: 10px;">服务描述:</span>
                <el-input type="textarea" v-model="changeServiceForm.details" placeholder="服务描述"
                    style="width: 100%; height: 100px; margin-bottom: 20px;" />
                <el-button type="primary" @click="changeDescriptionFunction(changeServiceForm)"
                    style="margin-bottom: 20px;">修改服务描述</el-button>

                <span style="display: block; margin-bottom: 10px;">服务条款:</span>
                <el-input type="textarea" v-model="changeServiceForm.terms" placeholder="服务条款"
                    style="width: 100%; height: 100px; margin-bottom: 20px;" />
                <el-button type="primary" @click="changeTermsFunction(changeServiceForm)"
                    style="margin-bottom: 20px;">修改服务条款</el-button>

                <span style="display: block; margin-bottom: 10px;">服务状态: {{ changeServiceForm.state == 0 ? "已上架" : "已下架"
                    }}</span>
                <el-button type="primary" @click="changeStateFunction(changeServiceForm)">
                    {{ changeServiceForm.state == 1 ? "上架" : "下架" }}
                </el-button>
            </div>

            <template #footer>
                <div class="dialog-footer" style="text-align: right;">
                    <el-button @click="changeFlag = false">取消</el-button>
                    <el-button type="primary" @click="changeFlag = false">确定</el-button>
                </div>
            </template>
        </el-dialog>

        <!-- 新增服务对话框 -->
        <el-dialog v-model="addServiceDetailFlag" title="新增服务详情" :width="'80%'">
            <el-form :model="addServiceDetailForm">
                <el-form-item label="服务名称" required>
                    <el-input v-model="addServiceDetailForm.serviceName" placeholder="请输入服务名称"></el-input>
                </el-form-item>
                <el-form-item label="描述">
                    <el-input type="textarea" v-model="addServiceDetailForm.details" placeholder="请输入描述"></el-input>
                </el-form-item>
                <el-form-item label="预计时间(工时)" required>
                    <el-input v-model="addServiceDetailForm.estimatedTime" placeholder="请输入预计时间"></el-input>
                </el-form-item>
                <el-form-item label="服务条款">
                    <el-input type="textarea" v-model="addServiceDetailForm.terms" placeholder="请输入服务条款"></el-input>
                </el-form-item>
                <el-form-item label="服务价格" required>
                    <el-input-number v-model="addServiceDetailForm.servicePrice" :min="0"
                        placeholder="请输入服务价格"></el-input-number>
                </el-form-item>
                <el-form-item label="类别id">
                    <el-select v-model="addServiceDetailForm.categoryId" placeholder="请选择类别id">
                        <el-option v-for="item in categoryList" :key="item.categoryId"
                            :label="item.categoryName + item.description" :value="item.categoryId" />
                    </el-select>
                </el-form-item>
                <el-form-item label="服务图片">
                    <el-upload class="upload-demo" action="http://192.168.50.9:80/serve/serviceDetails/uploadPicture"
                        :on-success="handleUploadSuccess" :show-file-list="false" :limit="1" :on-exceed="handleExceed"
                        :headers="header">
                        <el-button size="small" type="primary">点击上传</el-button>
                    </el-upload>
                </el-form-item>
                <el-form-item label="服务流程">
                    <el-input v-model="addServiceDetailForm.processtemplateId" placeholder="请输入服务流程"
                        :disabled="true"></el-input>
                    <el-button @click="toggleTable">
                        {{ showProcessesTableFlag ? '隐藏' : '显示' }} 服务流程
                    </el-button>
                    <el-button v-if="showProcessesTableFlag" @click="openDialog('process')">添加服务流程</el-button>
                    <el-button v-if="showProcessesTableFlag" @click="deleteProcesses">删除服务流程</el-button><br />

                    <div v-if="showProcessesTableFlag" style="margin-top: 10px;">
                        <p>搜索条件</p>
                        <el-input v-model="serviceProcessesSearchForm.processesName" placeholder="流程名称"
                            style="width: 150px;" clearable />
                        <el-input v-model="serviceProcessesSearchForm.serviceId" placeholder="建议服务编号"
                            style="width: 150px;" clearable />
                        <el-button @click="findServiceProcess">搜索</el-button>
                    </div>
                    <el-table v-if="showProcessesTableFlag" :data="serviceProcesses.list" stripe
                        style="margin-top: 10px;" @selection-change="handleSelectionChangeProcesses">
                        <el-table-column type="selection" :selectable="selectable" width="55" />
                        <el-table-column prop="processesId" label="流程编号" />
                        <el-table-column prop="processesName" label="流程名称" />
                        <el-table-column prop="processesPrice" label="流程总价" />
                        <el-table-column prop="createdAt" label="创建时间" />
                        <el-table-column prop="updatedAt" label="更新时间" />
                        <el-table-column prop="serviceId" label="建议服务id" />
                        <el-table-column prop="processDetails" label="流程详情" />
                        <el-table-column prop="processesImage" label="流程图片">
                            <template #default="scope">
                                <el-image :src="scope.row.processesImage" style="width: 50px; height: 50px;" />
                            </template>
                        </el-table-column>
                        <el-table-column prop="workingHours" label="工时" />
                        <el-table-column prop="unitPrice" label="工时单价" />
                        <el-table-column label="操作">
                            <template #default="scope">
                                <el-button size="small" @click="changeProcesses(scope.row)">维护</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div class="demo-pagination-block">
                        <el-pagination v-if="showProcessesTableFlag" v-model:current-page="serviceProcesses.pageNum"
                            v-model:page-size="serviceProcesses.pageSize" :page-sizes="[1, 2, 3]" :size="size"
                            :disabled="disabled" :background="background"
                            layout="total, sizes, prev, pager, next, jumper" :total="serviceProcesses.total"
                            @size-change="handleSizeChangProcesses" @current-change="handleCurrentChangeProcesses" />
                    </div>
                </el-form-item>

                <el-form-item label="服务必需品">
                    <el-input v-model="addServiceDetailForm.itemstemplateId" placeholder="请输入服务必需品"
                        :disabled="true"></el-input>
                    <el-button @click="toggleTableItem">
                        {{ showItemsTableFlag ? '隐藏' : '显示' }} 必需品
                    </el-button>
                    <el-button v-if="showItemsTableFlag" @click="openDialog('necessity')">添加必需品</el-button>
                    <el-button v-if="showItemsTableFlag" @click="deleteItems">删除必需品</el-button><br />
                    <div v-if="showItemsTableFlag" style="margin-top: 10px;">
                        <p>搜索条件</p>
                        <el-input v-model="requiredItemsSearchForm.itemName" placeholder="必需品名称" style="width: 150px;"
                            clearable />
                        <el-input v-model="requiredItemsSearchForm.processesId" placeholder="建议流程编号"
                            style="width: 150px;" clearable />
                        <el-button @click="findRequiredItems">搜索</el-button>
                    </div>
                    <el-table v-if="showItemsTableFlag" :data="requiredItems.list" stripe style="margin-top: 10px;"
                        @selection-change="handleSelectionChangeItems">
                        <el-table-column type="selection" :selectable="selectable" width="55" />
                        <el-table-column prop="itemsId" label="必需品编号" />
                        <el-table-column prop="itemName" label="必需品名称" />
                        <el-table-column prop="quantity" label="必需品数量" />
                        <el-table-column prop="description" label="必需品描述" />
                        <el-table-column prop="unitPrice" label="必需品单价" />
                        <el-table-column prop="itemsImage" label="必需品图片">
                            <template #default="scope">
                                <el-image :src="scope.row.itemsImage" style="width: 50px; height: 50px;" />
                            </template>
                        </el-table-column>
                        <el-table-column prop="price" label="必需品总价" />
                        <el-table-column prop="processesId" label="推荐使用流程" />
                        <el-table-column label="操作">
                            <template #default="scope">
                                <el-button size="small" @click="changeItems(scope.row)">维护</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div class="demo-pagination-block">
                        <el-pagination v-if="showItemsTableFlag" v-model:current-page="requiredItems.pageNum"
                            v-model:page-size="requiredItems.pageSize" :page-sizes="[1, 2, 3]" :size="size"
                            :disabled="disabled" :background="background"
                            layout="total, sizes, prev, pager, next, jumper" :total="requiredItems.total"
                            @size-change="handleSizeChangItems" @current-change="handleCurrentChangeItems" />
                    </div>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="addServiceDetailFlag = false">取消</el-button>
                <el-button type="primary" @click="save">保存</el-button>
            </span>
        </el-dialog>

        <!-- 流程信息维护对话框 -->
        <el-dialog v-model="changeProcessesFlag" title="流程信息维护" width="500" :before-close="handleClose">
            <div style="padding: 20px;">
                <span style="display: block; margin-bottom: 10px;">单价修改:</span>
                <el-input v-model="changeProcessesForm.unitPrice" placeholder="请输入单价" style="width: 50%;" />
                <el-button size="small" type="primary" @click="processChangePricefunction">确定</el-button>
                <span style="display: block; margin-bottom: 10px;">修改服务建议编号:</span>
                <el-input v-model="changeProcessesForm.serviceId" placeholder="请输入修改后服务编号" style="width: 50%;" />
                <el-button size="small" type="primary" @click="processServiceFunction">确定</el-button>
            </div>
            <template #footer>
                <div class="dialog-footer" style="text-align: right;">
                    <el-button @click="changeProcessesFlag = false">取消</el-button>
                    <el-button type="primary" @click="changeProcessesFlag = false">确定</el-button>
                </div>
            </template>
        </el-dialog>

        <!-- 必需品信息维护对话框 -->
        <el-dialog v-model="changeItemsFlag" title="必需品信息维护" width="500" :before-close="handleClose">
            <div style="padding: 20px;">
                <span style="display: block; margin-bottom: 10px;">单价修改:</span>
                <el-input v-model="changeItemsForm.unitPrice" placeholder="请输入单价" style="width: 50%;" />
                <el-button size="small" type="primary" @click="changeRequireItemsFunction">确定</el-button>
                <span style="display: block; margin-bottom: 10px;">修改建议流程编号:</span>
                <el-input v-model="changeItemsForm.processesId" placeholder="修改建议流程编号" style="width: 50%;" />
                <el-button size="small" type="primary" @click="changeRequireItemsIdFunction">确定</el-button>
            </div>
            <template #footer>
                <div class="dialog-footer" style="text-align: right;">
                    <el-button @click="changeItemsFlag = false">取消</el-button>
                    <el-button type="primary" @click="changeItemsFlag = false">确定</el-button>
                </div>
            </template>
        </el-dialog>




        <el-dialog :title="dialogTitle" v-model="dialogVisible" width="500px"> <el-form label-width="100px"> <el-form-item v-for="(field, key) in dialogFields" :key="key" :label="field.label"> <el-input v-if="field.type === 'input'" v-model="dialogData[key]" /> <el-input-number v-if="field.type === 'number'" v-model="dialogData[key]" :min="1" /> <el-input v-if="field.type === 'textarea'" v-model="dialogData[key]" type="textarea" /> <el-upload v-if="field.type === 'image'" :action="field.uploadUrl" :show-file-list="false" :on-success="handleSuccess" :before-upload="beforeUpload" :headers="getUploadHeaders()"> <el-button type="primary">点击上传</el-button> </el-upload> <div v-if="dialogData.itemsImage" style="margin-top: 10px;"> < img :src="dialogData.itemsImage" alt="Uploaded Image" style="width: 100px; height: 100px;"> </div> </el-form-item> </el-form> <template #footer> <el-button @click="dialogVisible = false">取消</el-button> <el-button type="primary" @click="saveDialogData">保存</el-button> </template> </el-dialog>


    </div>
</template>

<script>
export default {
    name: 'ShopServiceManager',
    data() {
        return {
            changeItemsFlag: false,
            changeProcessesFlag: false,
            showItemsTableFlag: false,
            serviceProcessesSearchForm: {},
            showProcessesTableFlag: false,
            addServiceDetailForm: {},
            addServiceDetailFlag: false,
            changeFlag: false,
            serviceDetailsSearchForm: {
                serviceName: '',
                servicePrice: '',
                state: '',
                pageNo: 1,
                pageSize: 1,
            },
            requiredItemsSearchForm: {},
            serviceDetails: { list: [], total: 0, pageNum: 1, pageSize: 10 },
            serviceProcesses: { list: [], total: 0, pageNum: 1, pageSize: 10 },
            requiredItems: { list: [], total: 0, pageNum: 1, pageSize: 10 },
            categoryList: [],
            changeServiceForm: {},
            dialogVisible: false,
            dialogTitle: '',
            dialogFields: {},
            dialogData: {},
            currentModule: '',
            deleteDtailServiceId: { serviceId: [] },
            deleteProcessId: { id: [] },
            deleteItemsId: { id: [] },
            changeProcessesForm: {},
            changeItemsForm: {},
            selectable: (row) => {
                return true; // 允许所有行被选择
            },
        };
    },
    mounted() {
        // 初始化每个服务项的折叠状态
        this.serviceDetails.list.forEach(item => {
            item.showItems = false;
            item.showProcesses = false;
        });
    },
    methods: {
        // 获取列表数据
        getListByModule(module) {
            return {
                necessity: this.requiredItems.list,
                category: this.serviceTypes,
                detail: this.serviceDetails.list,
                process: this.serviceProcesses.list
            }[module];
        },

        // 保存对话框数据
        saveDialogData() {
            const list = this.getListByModule(this.currentModule);
            let apiUrl;
            let requestData = { ...this.dialogData };

            // 根据模块类型设置不同的API URL
            switch (this.currentModule) {
                case 'necessity':
                    apiUrl = '/serve/requiredItems/addOneRequiredItem';
                    break;
                case 'process':
                    apiUrl = '/serve/serviceProcesses/addOneProcesses';
                    break;
                default:
                    this.$message.error('未知模块类型');
                    return;
            }

            // 发送POST请求保存数据
            this.$http.post(apiUrl, requestData)
                .then(response => {
                    if (response.data.success) {
                        // 更新本地列表
                        if (requestData.index !== undefined) {
                            list[requestData.index] = { ...requestData };
                        } else {
                            list.push({ ...requestData });
                        }
                        this.dialogVisible = false;
                        this.$message.success('保存成功');
                    } else {
                        this.$message.error('保存失败');
                    }
                })
                .catch(error => {
                    console.error('保存失败:', error);
                    this.$message.error('保存失败，请稍后再试');
                });
        },

        // 保存服务详情
        save() {
            // 确保这些字段存在并且是字符串
            let processesIdString = this.addServiceDetailForm.processtemplateId || "";
            let itemsIdString = this.addServiceDetailForm.itemstemplateId || "";

            // 拆分字符串为数组并转换为数字
            this.addServiceDetailForm.processesId = processesIdString.split(',').map(Number);
            this.addServiceDetailForm.itemsId = itemsIdString.split(',').map(Number);

            // 保存逻辑，例如发送请求到后端
            this.$http.post("/serve/serviceDetails/addService", this.addServiceDetailForm).then(res => {
                if (res.data.code === 200) {
                    this.$message.success(res.data.message);
                    this.findAllService();
                } else {
                    this.$message.error(res.data.message);
                }
            });

            // 发送请求后，重置表单和关闭对话框
            this.addServiceDetailFlag = false;
        },

        // 修改必需品推荐流程ID
        changeRequireItemsIdFunction() {
            this.$http.put("/serve/requiredItems/changeItemsProcessesId", this.changeItemsForm).then(res => {
                if (res.data.code === 200) {
                    this.$message.success(res.data.message);
                    this.findRequiredItems();
                } else {
                    this.$message.error(res.data.message);
                }
            });
        },

        // 修改必需品单价
        changeRequireItemsFunction() {
            this.$http.put("/serve/requiredItems/changeRequiredItems", this.changeItemsForm).then(res => {
                if (res.data.code === 200) {
                    this.$message.success(res.data.message);
                    this.findRequiredItems();
                } else {
                    this.$message.error(res.data.message);
                }
            });
        },

        // 修改流程建议服务ID
        processServiceFunction() {
            this.$http.put("/serve/serviceProcesses/changeServiceId", this.changeProcessesForm).then(res => {
                if (res.data.code === 200) {
                    this.$message.success(res.data.message);
                    this.findServiceProcess();
                } else {
                    this.$message.error(res.data.message);
                }
            });
        },

        // 更改流程价格
        processChangePricefunction() {
            if (this.changeProcessesForm.unitPrice == null || this.changeProcessesForm.unitPrice <= 0) {
                this.$message.error("请输入有效的单价");
                return;
            }

            this.$http.put("/serve/serviceProcesses/changeProcesses", this.changeProcessesForm).then(res => {
                if (res.data.code === 200) {
                    this.$message.success(res.data.message);
                    this.findServiceProcess();
                } else {
                    this.$message.error(res.data.message);
                }
            });
        },

        // 获取上传请求头
        getUploadHeaders() {
            const token = localStorage.getItem('token');
            return {
                token: token
            };
        },

        // 编辑条目
        editItem(item, module) {
            this.openDialog(module, { ...item, index: this.getListByModule(module).indexOf(item) });
        },

        // 获取默认对话框数据
        getDefaultDialogData(module) {
            return Object.fromEntries(Object.keys(this.getDialogFields(module)).map(key => [key, '']));
        },

        // 获取对话框字段
        getDialogFields(module) {
            const fields = {
                necessity: {
                    itemName: { label: '必需品名称', type: 'input' },
                    unitPrice: { label: '单价', type: 'number' },
                    quantity: { label: '数量', type: 'number' },
                    description: { label: '描述', type: 'textarea' },
                    processesId: { label: '推荐使用流程ID', type: 'input' },
                    processesId: { label: '推荐使用流程ID', type: 'input' },
                    itemsImage: { label: '图片地址', type: 'image', uploadUrl: 'http://192.168.50.9:80/serve/requiredItems/uploadPicture' }
                },
                process: {
                    processesName: { label: '流程名称', type: 'input' },
                    unitPrice: { label: '单位工时价格', type: 'input' },
                    serviceId: { label: '推荐使用服务ID', type: 'input' },
                    workingHours: { label: '工时', type: 'input' },
                    processesPrice: { label: '流程价格', type: 'input' },
                    processDetails: { label: '流程描述', type: 'textarea' },
                    processesImage: { label: '流程图片', type: 'image', uploadUrl: 'http://192.168.50.9:80/serve/serviceProcesses/uploadPicture' }
                }
            };
            return fields[module];
        },

        // 打开对话框
        openDialog(module, item = null) {
            this.currentModule = module;
            this.dialogTitle = item ? '编辑' : '新增';
            this.dialogFields = this.getDialogFields(module);
            this.dialogData = item ? { ...item } : this.getDefaultDialogData(module);
            this.dialogVisible = true;
        },

        // 处理必需品分页大小变化
        handleSizeChangItems(newSize) {
            this.requiredItemsSearchForm.pageSize = newSize;
            this.findRequiredItems();
        },

        // 处理必需品当前页变化
        handleCurrentChangeItems(newPage) {
            this.requiredItemsSearchForm.pageNo = newPage;
            this.findRequiredItems();
        },

        // 处理流程分页大小变化
        handleSizeChangProcesses(newSize) {
            this.serviceProcessesSearchForm.pageSize = newSize;
            this.findServiceProcess();
        },

        // 处理流程当前页变化
        handleCurrentChangeProcesses(newPage) {
            this.serviceProcessesSearchForm.pageNo = newPage;
            this.findServiceProcess();
        },

        // 切换流程表格显示状态
        toggleTable() {
            this.showProcessesTableFlag = !this.showProcessesTableFlag;
        },

        // 切换必需品表格显示状态
        toggleTableItem() {
            this.showItemsTableFlag = !this.showItemsTableFlag;
        },

        // 删除服务详情
        deleteDetails() {
            if (!this.deleteDtailServiceId || !('serviceId' in this.deleteDtailServiceId)) {
                this.$message("请选中需要删除的编号");
                return;
            }

            let serviceIds = this.deleteDtailServiceId.serviceId;

            if (typeof serviceIds === 'string') {
                serviceIds = serviceIds.trim();
            } else if (Array.isArray(serviceIds)) {
                serviceIds = serviceIds.map(id => String(id)).join(',');
            } else {
                this.$message("无效的服务编号格式");
                return;
            }

            const idsArray = serviceIds.split(',').map(serviceId => Number(serviceId.trim())).filter(serviceId => !isNaN(serviceId));

            if (idsArray.length > 0) {
                this.$http.post("/serve/serviceDetails/deleteById", idsArray)
                    .then(resp => {
                        if (resp.data.success) {
                            this.$message("删除成功");
                            this.findRequiredItems();
                        } else {
                            this.$message("删除失败");
                        }
                    })
                    .catch(error => {
                        console.error("删除请求失败:", error);
                        this.$message("请求错误，请重试");
                    });
            } else {
                this.$message("请选中需要删除的编号");
            }
        },

        // 处理选中行变化
        handleSelectionChange(selectedRows) {
            if (selectedRows && selectedRows.length > 0) {
                this.deleteDtailServiceId.serviceId = selectedRows.map(row => row.serviceId).join(',');
            } else {
                this.deleteDtailServiceId.serviceId = "";
            }
        },

        // 处理流程选中行变化
        handleSelectionChangeProcesses(selectedRows) {
            if (selectedRows && selectedRows.length > 0) {
                this.addServiceDetailForm.processtemplateId = selectedRows.map(row => row.processesId).join(',');
            } else {
                this.addServiceDetailForm.processtemplateId = '';
            }
        },

        // 处理必需品选中行变化
        handleSelectionChangeItems(selectedRows) {
            if (selectedRows && selectedRows.length > 0) {
                this.addServiceDetailForm.itemstemplateId = selectedRows.map(row => row.itemsId).join(',');
            } else {
                this.addServiceDetailForm.itemstemplateId = '';
            }
        },

        // 删除必需品
        deleteItems() {
            let itemsString = this.addServiceDetailForm.itemstemplateId || "";
            this.deleteItemsId.id = itemsString.split(',').map(Number);
            if (this.deleteItemsId.id && this.deleteItemsId.id.length > 0) {
                this.$http.post("/serve/requiredItems/deleteById", this.deleteItemsId.id).then(resp => {
                    if (resp.data.success) {
                        this.$message("删除成功");
                        this.findRequiredItems();
                    } else {
                        this.$message("删除失败");
                    }
                });
            } else {
                this.$message("请选中需要删除的编号");
            }
        },

        // 删除流程
        deleteProcesses() {
            let processesString = this.addServiceDetailForm.processtemplateId || "";
            this.deleteProcessId.id = processesString.split(',').map(Number);
            if (this.deleteProcessId.id && this.deleteProcessId.id.length > 0) {
                this.$http.post("/serve/serviceProcesses/deleteById", this.deleteProcessId.id).then(resp => {
                    if (resp.data.success) {
                        this.$message("删除成功");
                        this.findRequiredItems();
                    } else {
                        this.$message("删除失败");
                    }
                });
            } else {
                this.$message("请选中需要删除的编号");
            }
        },

        // 处理分页大小变化
        handleSizeChange(newSize) {
            this.serviceDetailsSearchForm.pageSize = newSize;
            this.findService();
        },

        // 处理当前页变化
        handleCurrentChange(newPage) {
            this.serviceDetailsSearchForm.pageNo = newPage;
            this.findService();
        },

        // 关闭对话框
        handleClose() {
            this.changeFlag = false;
            this.changeServiceForm = {};
            this.addServiceDetailForm = {};
        },

        // 处理上传成功
        handleUploadSuccess(response, file) {
            this.addServiceDetailForm.serviceImage = response.url;
            this.$message.success('上传成功');
        },

        // 处理文件超出限制
        handleExceed(files, file) {
            this.$message.warning('最多只能上传 1 个文件');
        },

        // 查询服务
        findService() {
            this.$http.get("/serve/serviceDetails/findServiceById", {
                params: {
                    serviceName: this.serviceDetailsSearchForm.serviceName,
                    servicePrice: this.serviceDetailsSearchForm.servicePrice,
                    state: this.serviceDetailsSearchForm.state,
                    'pageForm.pageNo': this.serviceDetailsSearchForm.pageNo,
                    'pageForm.pageSize': this.serviceDetailsSearchForm.pageSize
                }
            }).then((res) => {
                if (res?.data?.data) {
                    this.serviceDetails = res.data.data;
                } else {
                    console.error("API响应数据未定义");
                }
            });
        },

        // 修改服务描述
        changeDescriptionFunction(service) {
            const data = {
                serviceId: service.serviceId,
                details: service.details
            };
            this.$http.put("/serve/serviceDetails/changeServiceDetails", data).then((res) => {
                if (res.data.code === 200) {
                    this.$message.success(res.data.message);
                    this.findService();
                } else {
                    this.$message.error(res.data.message);
                }
            });
        },

        // 修改服务条款
        changeTermsFunction(service) {
            const data = {
                serviceId: service.serviceId,
                terms: service.terms
            };
            this.$http.put("/serve/serviceDetails/changeServiceTerms", data).then((res) => {
                if (res.data.code === 200) {
                    this.$message.success(res.data.message);
                    this.findService();
                } else {
                    this.$message.error(res.data.message);
                }
            });
        },

        // 修改服务状态
        changeStateFunction(service) {
            const data = new FormData();
            data.append("serviceId", service.serviceId);
            const url = service.state == 0 ? "/serve/serviceDetails/unShelvesService" : "/serve/serviceDetails/shelvesService";
            this.$http.put(url, data).then((res) => {
                if (res.data.code === 200) {
                    this.$message.success(res.data.message);
                    this.findService();
                } else {
                    this.$message.error(res.data.message);
                }
            });
        },

        // 维护服务
        changeService(row) {
            this.changeFlag = true;
            this.changeServiceForm = { ...row };
        },

        // 维护流程
        changeProcesses(row) {
            this.changeProcessesFlag = true;
            this.changeProcessesForm = { ...row };
        },

        // 维护必需品
        changeItems(row) {
            this.changeItemsFlag = true;
            this.changeItemsForm = { ...row };
        },

        // 查询所有服务
        findAllService() {
            this.$http.get("/serve/serviceDetails/findServiceById").then(res => {
                if (res?.data?.data) {
                    this.serviceDetails = res.data.data;
                } else {
                    console.error("API响应数据未定义");
                }
            });
        },

        // 查询类别列表
        findCategoryList() {
            this.$http.get("/serve/serviceCategory/findCategoryUser").then(res => {
                if (res?.data?.data) {
                    this.categoryList = res.data.data;
                } else {
                    console.error("API响应数据未定义");
                }
            });
        },

        // 查询服务流程
        findServiceProcess() {
            this.$http.get("/serve/serviceProcesses/findProcesses", {
                params: {
                    processesName: this.serviceProcessesSearchForm.processesName,
                    serviceId: this.serviceProcessesSearchForm.serviceId,
                    'pageForm.pageNo': this.serviceProcessesSearchForm.pageNo,
                    'pageForm.pageSize': this.serviceProcessesSearchForm.pageSize
                }
            }).then(res => {
                if (res?.data?.data) {
                    this.serviceProcesses = res.data.data;
                } else {
                    console.error("API响应数据未定义");
                }
            });
        },

        // 查询必需品
        findRequiredItems() {
            this.$http.get("/serve/requiredItems/findRequiredItem", {
                params: {
                    itemName: this.requiredItemsSearchForm.itemName,
                    processesId: this.requiredItemsSearchForm.processesId,
                    'pageForm.pageNo': this.requiredItemsSearchForm.pageNo,
                    'pageForm.pageSize': this.requiredItemsSearchForm.pageSize
                }
            }).then(res => {
                if (res?.data?.data) {
                    this.requiredItems = res.data.data;
                } else {
                    console.error("API响应数据未定义");
                }
            });

        },
        load() {
            this.findAllService();
            this.findCategoryList();
            this.findServiceProcess();
            this.findRequiredItems();
        }
    },
    created() {
        this.load();
    },
};
</script>

<style scoped>
/* 可以在这里添加样式 */
</style>